<template>
  <el-container class="layout-container-demo" style="height: 100vh">
    <el-aside width="250px">
      <el-scrollbar>
        <el-menu :unique-opened="true" router :default-active="activePath">
          <template v-for="item in menuList">
            <el-menu-item
              v-if="item.childrenMenuList.length === 0"
              :index="'/' + item.path"
              :key="item.menuId"
            >
              <template #title>
                {{ item.menuName }}
              </template>
            </el-menu-item>
            <el-sub-menu v-else :index="item.menuId">
              <template #title>
                {{ item.menuName }}
              </template>
              <el-menu-item
                v-for="subItem in item.childrenMenuList"
                :index="'/' + subItem.path"
                :key="subItem.menuId"
              >
                <template #title>{{ subItem.menuName }}</template>
              </el-menu-item>
            </el-sub-menu>
          </template>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header style="text-align: center; font-size: 30px">
        <div class="toolbar">{{ title }}</div>
      </el-header>

      <el-main style="height: 1000px">
        <el-scrollbar><router-view /> </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { ElMenuItem } from "element-plus";
import { computed } from "vue";
import { useRoute } from "vue-router";

let route = useRoute();
const activePath = computed(() => route.path);
const title = computed(() => route.name);
const menuList: any = [
  {
    menuName: "Elements",
    menuId: "Elements",
    childrenMenuList: [
      {
        menuName: "useIntersectionObserver",
        path: "useIntersectionObserver",
      },
      {
        menuName: "useMutationObserver",
        path: "useMutationObserver",
      },
      {
        menuName: "useActiveElement",
        path: "useActiveElement",
      },
    ],
  },
  {
    menuName: "Animation",
    menuId: "Animation",
    childrenMenuList: [
      {
        menuName: "useAnimate",
        path: "useAnimate",
      },

      {
        menuName: "useInterval",
        path: "useInterval",
      },
      {
        menuName: "useIntervalFn",
        path: "useIntervalFn",
      },
    ],
  },
  {
    menuName: "Browser",
    menuId: "Browser",
    childrenMenuList: [
      {
        menuName: "useBluetooth",
        path: "useBluetooth",
      },
    ],
  },
  {
    menuName: "Array",
    menuId: "Array",
    childrenMenuList: [
      {
        menuName: "useArrayFilter",
        path: "useArrayFilter",
      },
      {
        menuName: "useArrayEvery",
        path: "useArrayEvery",
      },
      {
        menuName: "useArraySome",
        path: "useArraySome",
      },
      {
        menuName: "useArrayMap",
        path: "useArrayMap",
      },
      {
        menuName: "useArrayUnique",
        path: "useArrayUnique",
      },
      
    ],
  },
  {
    menuName: "State",
    menuId: "State",
    childrenMenuList: [
      {
        menuName: "useSessionStorage",
        path: "useSessionStorage",
      },
      {
        menuName: "useLocalStorage",
        path: "useLocalStorage",
      },
      {
        menuName: "useStorageAsync",
        path: "useStorageAsync",
      },
      {
        menuName: "useRefHistory",
        path: "useRefHistory",
      },
    ],
  },
];
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
